<template>
  <div class="voteDetail">
    <div class="msg" v-if="data.id">
      <div class="wrap">
        <div class="title">{{ data.title }}</div>
        <div class="time">调研时间: {{ data.startTime }}~{{ data.endTime }}</div>
        <img class="img" :src="data.coverImgPath">
        <div class="description">{{ data.description }}</div>
      </div>
    </div>
    <div class="vote-wrap" :class="{ disabled: !canSelect }">
      <div v-for="(item, index) in data.optionList" :key="item.id">
        <div class="title">
          {{ index + 1 }}. {{ item.name }}
          <span class="dark">{{ item.multipleChoice === 1 ? '(单选)' : `(最多选${item.multipleChoice}项)` }}</span>
        </div>
        <!-- 单选 -->
        <van-radio-group :value="result[item.id]" @change="handleChange" v-if="item.multipleChoice === 1">
          <div class="options-list" :class="['type' + data.type]" @click="handelSelect(item.id)">
            <div class="options-item" v-for="(item2, index2) in item.optionChildList" :key="item2.id">
              <div class="content">
                <van-radio :name="item2.id" icon-size="15px" checked-color="#D1272F">
                  <div class="text" :class="{ disabled: !canSelect }"><span v-if="item.isSerialNumber">{{ index2 + 1 }}.</span> {{ item2.name }} </div>
                  <img v-if="data.type === 2" class="img" :src="generateImgUrl(item2.coverImgPath)" mode="aspectFill" />
                </van-radio>
              </div>
            </div>
          </div>
        </van-radio-group>
        <!-- 多选 -->
        <van-checkbox-group :value="result[item.id]" @change="handleChange" v-else :max="item.multipleChoice">
          <div class="options-list" :class="['type' + data.type]" @click="handelSelect(item.id)">
            <div class="options-item" v-for="(item2, index2) in item.optionChildList" :key="item2.id">
              <div class="content">
                <van-checkbox :name="item2.id" icon-size="15px" checked-color="#D1272F">
                  <div class="text" :class="{ disabled: !canSelect }"><span v-if="item.isSerialNumber">{{ index2 + 1 }}.</span> {{ item2.name }} </div>
                  <img v-if="data.type === 2" class="img" :src="generateImgUrl(item2.coverImgPath)" mode="aspectFill" />
                </van-checkbox>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </div>
    <div class="btn-wrap" v-if="data.optionList.length && canSelect">
      <van-button class="btn" @click="handleSumbit" v-if="canSelect">提交</van-button>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { generateImgUrl } from '@/utils'

export default {
  data () {
    return {
      generateImgUrl,
      id: null,
      data: {},
      result: {},
      selectQuestionId: null,
      isAnonymou: false,
    }
  },
  computed: {
    canSelect () {
      return !this.data.hasTicket
    },
  },
  onLoad (options) {
    this.id = options.id
    this.getData()
  },
  onShareAppMessage () {
    return {
      title: this.data.title,
      imageUrl: generateImgUrl(this.data.coverImgPath),
      query: {
        id: this.id,
      },
    }
  },
  methods: {
    async getData () {
      const { result } = await api.getVoteDetail({ id: this.id })
      this.data = result
      if (this.data.hasTicket) {
        this.setResult()
      }
    },
    setResult () {
      this.data.optionList.forEach(item => {
        item.optionChildList.forEach(item2 => {
          if (item2.hasTicket) {
            if (item.multipleChoice === 1) {
              this.result[item.id] = item2.id
            } else {
              if (Array.isArray(this.result[item.id])) {
                this.result[item.id].push(String(item2.id))
              } else {
                this.result[item.id] = [String(item2.id)]
              }
            }
          }
        })
      })
    },
    handelSelect (questionId) {
      this.selectQuestionId = questionId
    },
    handleChange (e) {
      setTimeout(() => {
        this.result = Object.assign({}, this.result, {
          [this.selectQuestionId]: e.detail,
        })
      }, 20)
      console.log('this.result', this.result)
    },
    async handleSumbit () {
      const result = []
      for (const key of Object.keys(this.result)) {
        if (Array.isArray(this.result[key])) {
          this.result[key].forEach(item => {
            result.push({
              optionId: key,
              optionChildId: item,
              voteInvestigateId: this.id,
              isAnonymity: this.isAnonymou ? 1 : 0,
            })
          })
        } else {
          result.push({
            optionId: key,
            optionChildId: this.result[key],
            voteInvestigateId: this.id,
            isAnonymity: this.isAnonymou ? 1 : 0,
          })
        }
      }
      await api.sumbitVote(result)
      wx.redirectTo({
        url: '/pages/voteSuccess/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.voteDetail {
	.msg {
		padding: 0 18px;
		background: #fff;

		.wrap {
			padding: 20px 0;
			border-bottom: 1px solid #efefef;

			.title {
				font-weight: bold;
				font-size: 16px;
				color: #333;
			}

			.time {
				margin-top: 8px;
				font-size: 12px;
				color: #999;
			}

			.img {
				width: 100%;
				margin-top: 12px;
			}

			.description {
				margin-top: 12px;
				line-height: 20px;
				text-indent: 24px;
				font-size: 12px;
				color: #333;
			}
		}
	}

	.vote-wrap {
		overflow: hidden;
		padding: 0 18px;
		background: #fff;

		&.disabled {
			filter: grayscale(100%);
			pointer-events: none;
		}

		.title {
			padding-top: 18px;
			font-size: 14px;

			.dark {
				margin-left: 10px;
				color: #999;
			}
		}

		.options-list {
			padding: 10px 0;
			background: #fff;

			.options-item {
				padding: 0 5px;

				/deep/ .van-radio__icon-wrap,
				/deep/ .van-checkbox__icon-wrap, {
					transform: translateY(9px) scale(.8);
				}

				.text {
					width: 600rpx;
					height: 20px;
					padding: 6px 0;
					line-height: 20px;
					font-size: 12px;
					color: #333;

					&.disabled {
						color: #999;
					}
				}

				.msg {
					display: flex;
					align-items: center;
					margin-left: 26px;
					margin-top: 9px;

					.progress-wrap {
						flex: 1;
					}

					.num {
						flex: 0 0 80px;
						margin-left: 10px;
						font-size: $fz-s;
						color: #999;
					}
				}
			}

			&.type2 {
				display: flex;
				flex-wrap: wrap;

				.options-item {
					width: 50%;
					margin-top: 23px;
					padding: 0;

					.content {
						padding: 0 34px;

						.img {
							width: 150px;
							height: 180px;
							margin-left: -50px;
							margin-top: 16px;
						}

						.msg {
							display: block;
							flex: wrap;
							margin-left: 0;

							.progress-wrap {
								width: 90%;
							}

							.num {
								margin-top: 10px;
							}
						}
					}
				}
			}

			&.type3 {
				padding-left: 20px;

				.options-item {
					.content {
						.text {
							font-size: $fz-m;
							color: #999;
						}
					}
				}
			}
		}

		.anonymou {
			display: flex;
			align-items: center;
			padding: 26px;
			padding-top: 10px;

			.switch {
				margin-left: 10px;
			}
		}

		.link {
			padding: 15px;
			text-align: center;
		}
	}

	.btn-wrap {
		padding: 25px 15px;

		/deep/ .van-button {
			width: 100%;
			height: 46px;
			border-radius: 5px;
			color: #fff;
			background: #d1272f;
		}
	}
}
</style>
